<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:58:56
 * @LastEditTime: 2022-03-31 09:28:26
-->
<template>
	<div class="panel">
    <div class="header">
      <div class="title">公告</div>
    </div>
    <div class="panel-body">
      <ul class="list">
        <li v-for="(item, index) in props.data" :key="index">
          <h5>{{ item.title }}</h5>
          <p class="time">{{ item.time }}</p>
        </li>
      </ul>
    </div>
	</div>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
// import type { TabsPaneContext } from 'element-plus'
const props = defineProps(['data'])

// const activeName = ref('first')

// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }

</script>

<style lang="scss" scoped>
.panel {
  // height: 478px;
  margin-top: 20px;
  // padding: 0 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
  border-radius: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    padding: 20px;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #242F57;
    line-height: 1em;
  }
  .list {
    li {
      // display: flex;
      // align-items: center;
      // flex-wrap: wrap;
      padding: 25px 20px;
      // height: 80px;
      border-top: 1px solid rgba(28,41,90,0.04);
      &:hover {
        background-color: #F4FAFF;
      }
      h5 {
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242F57;
        line-height: 28px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #636E95;
      }
      // .img {
      //   width: 38px;
      //   height: 38px;
      //   margin: 0 20px 0 38px;
      // }
      // .content {
      //   h5 {
      //     font-size: 16px;
      //     font-family: PingFangSC-Medium, PingFang SC;
      //     font-weight: 500;
      //     color: #242F57;
      //     line-height: 22px;
      //   }
      //   .time {
      //     font-size: 12px;
      //     font-family: PingFangSC-Medium, PingFang SC;
      //     color: #636E95;
      //   }
      // }
    }
  }
}
</style>
